<template>
	<el-card class="mod__menu">
		<column-list :showform="'fromArticle'" @getColumId="getColumnsId"></column-list>
		<br />
		<el-card class="mod__menu">
			<el-form :inline="true">
				<el-form-item label="">
					<el-input v-model="queryFormname" placeholder="输入关键词进行检索" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="default" @click="getDataList()">查询</el-button>
					<el-button type="primary" @click="addOrUpdateHandle()">发布内容</el-button>
				</el-form-item>
			</el-form>
			<el-table stripe border :data="state.dataList" style="width: 100%" row-key="id">
				<!-- <el-table-column type="selection" width="55"></el-table-column> -->
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				<el-table-column prop="title" label="封面图" align="center"  width="155">
					<template #default="scope">
						<img style="width: 120px;height: 100px;" :src="scope.row.firstPicturePath" />
					</template>
				</el-table-column>
				<el-table-column prop="title" label="文章标题" align="center"></el-table-column>
				<el-table-column prop="columnId" label="所属栏目"  align="center">
					<template #default="scope">
						<p>{{ getCloumnName(scope.row.columnId) }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="source" label="数据来源"  align="center">
					<template #default="scope">
						<p>{{ scope.row.source }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="pro_type" label="类型"  align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.status == ''" type="success">{{ statusInfo[scope.row.status] }}</el-tag>
						<el-tag v-else type="primary">{{ statusInfo[scope.row.status] }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="issuedTime" label="发布时间" width="160" align="center"></el-table-column>
				<el-table-column prop="createDate" label="创建时间" width="160" align="center"></el-table-column>
				<el-table-column prop="" label="操作" header-align="center" align="center" width="">
					<template #default="scope">
						<el-button v-if="scope.row.status !== 'PUBLISH'" type="" @click="addOrUpdateHandle(scope.row)">修改</el-button>
						<el-button v-if="scope.row.status !== 'PUBLISH'" type="danger" @click="delArticle(scope.row.id)">删除</el-button>
						<el-button v-if="scope.row.status == 'SAVE'" type="primary" @click="handleRelease(scope.row, 'SUCCESS')">提交审核</el-button>
						<el-button v-if="props.userType == 'admin' && (scope.row.status == 3 || scope.row.status == 4)" type="" @click="addOrUpdateHandle(scope.row, 'review')">查看</el-button>
						<el-button v-if="props.userType == 'admin' && (scope.row.status == 'SAVE')" type="warning" @click="handleRelease(scope.row, 'BACK')">驳回</el-button>
						<el-button v-if="props.userType == 'admin' && (scope.row.status == 'SUCCESS')" type="primary" @click="handleRelease(scope.row, 'PUBLISH')">发布</el-button>
						<el-button v-if="props.userType == 'admin' && scope.row.status == 'PUBLISH'" type="warning" @click="handleRelease(scope.row, 'SUCCESS')">撤回</el-button>
					</template>
				</el-table-column>
			</el-table>
			<br />
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
			<!-- 弹窗, 新增 / 修改 -->
			<add-or-update :readonly="state.readOnly" ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
		</el-card>
	</el-card>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import store from '@/store'
import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'
import ColumnList from './column.vue'
import AddOrUpdate from './publish-add-or-update.vue'
import { batchArticleApi, articleAuditApi, articleStopApi, getArticleListApi } from '@/api/cms/article'
import { getColumnTreeApi } from '@/api/cms/column'
import { findNameById } from '@/utils/common.js'

import { ElMessage } from 'element-plus/es'
import { on } from 'events'
const props = defineProps({
	userType: {
		type: String,
		required: true
	}
})
const queryFormname = ref("")
const state: IHooksOptions = reactive({
	dataListUrl: '',
	queryForm: {
		keyword: queryFormname.value,
		columnId: 0 // 关键词
	},
	isPage: true,
	readOnly: false

})
const sourceInfo = reactive({
	1: '自拟',
	2: '自动采集'
})

const statusInfo = reactive({
	"PUBLISH": '已发布',
	"BACK": '被驳回',
	"SAVE": '待审核',
	"SUCCESS": '已审核',
})
onMounted(() => {
	getDataList()
})
const getDataList = () => {
	getColumnList()
	let params = {
		ipi: state.ipi,
		ips: state.ips,
		keyword: queryFormname.value,
		columnId: state.queryForm.columnId,
	}
	getArticleListApi( params ).then(res => {
		state.dataList = res.data.result
		state.total = res.data.total 
	})
}
//接口调用
const handleRelease = (rowInfo: any, status: any) => {
	let title = statusInfo[status]
	if (status == 2) {
		//发布
		release([rowInfo?.id])
	} else if (status == 3) {
		//撤回 2 --> 1
		cancelRelease(rowInfo?.id)
	} else {
		handleStatus(rowInfo, status)
	}
}

const handleStatus = (rowInfo: any, status: any) => {
	let par = {
		auditBusinessNum: rowInfo.id,
		auditType: status,
		auditContent: '同意' , // 驳回意见
	}
	articleAuditApi(par)
		.then(res => {
			ElMessage.success('操作成功！')
			state.dataListLoading = false
			getDataList()
		})
		.catch(err => {
			state.dataListLoading = false
		})
}
// 发布
const release = (list: any) => {
	let params = {
		batchType: "PUBLISH",
		ids: [list]
	}
	batchArticleApi(params)
		.then(res => {
			ElMessage.success('操作成功！')
			state.dataListLoading = false
			getDataList()
		})
		.catch(err => {
			state.dataListLoading = false
		})
}
// 取消发布
const cancelRelease = (id: any) => {
	state.dataListLoading = true
	articleStopApi({ id: id }).then(res => {
		state.dataListLoading = false
		getDataList()
	})
}


const addOrUpdateRef = ref()
const addOrUpdateHandle = (row?: object) => {
	addOrUpdateRef.value.init(row)
}
/* 获得选中栏目id */
const getColumnsId = val => {
	state.queryForm.columnId = val.id
	getDataList()
}

// 删除
const delArticle = ids => {
	let params = {
		batchType: "DEL",
		ids: [ids]
	}
	batchArticleApi(params).then(res => {
		getDataList()
		ElMessage.success('删除成功')
	})
}
let columnOptions = null
// 获取栏目树
const getColumnList = () => {
  getColumnTreeApi().then((res: any) => {
    if (res) {
      columnOptions = res.data
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
const getCloumnName = (columnId) => {
	if(columnId && columnOptions){
		return findNameById(columnOptions, 'childColumnDetails', 'id', columnId , 'columnName' )
	}
}
const { selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style lang="scss" scoped></style>
